﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>focus.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	<table border="2" align="center" width="80%" id="tableID">
		<tr>
			<td>张三</td>
			<td>男</td>
			<td>22</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>男</td>
			<td>24</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>男</td>
			<td>26</td>
		</tr>
		<tr>
			<td>周六</td>
			<td>男</td>
			<td>28</td>
		</tr>
	</table>
	
	<hr/>
	
	<img height="120px" src="../images/zgl.jpg" style="position:absolute;left:30%;border-style:dashed;border-color:white"/>
	<img height="120px" src="../images/lb.jpg" style="position:absolute;left:60%;border-style:dashed;border-color:white"/>
	
	<script type="text/javascript">
	
		//鼠标移到某行上，某行背景变色
		$("table tr").mouseover(function(){
			$(this).css("background-color","inactivecaption");
		});	
		
		//鼠标移出某行，某行还原
		$("table tr").mouseout(function(){
			$(this).css("background-color","white");
		});
		
		//鼠标移到某图片上，为图片加边框
		$("img").mouseover(function(){
			$(this).css("border-color","red");
		});
		
		//鼠标移出图片，图片还原
		$("img").mouseout(function(){
			$(this).css("border-color","white");
		});
		
	</script>
	
  </body>
</html>
